<template>
  <div class="p-5">
    <div class="grid grid-cols-4 gap-8">
      <div class="flex flex-col border-r border-[#5693CB] pr-8 gradient-border">
        <div class="mb-4">
          <span class="text-lg font-bold">{{ keyEnterpriseData.name }}</span>
          <span v-if="keyEnterpriseData.count" class="ml-2 text-gray-600"
            >({{ keyEnterpriseData.count }})</span
          >
        </div>
        <div class="gap-4 flex-1 grid grid-rows-3">
          <div
            v-for="child in keyEnterpriseData.children"
            :key="child.id"
            class="flex items-center p-4 bg-gray-50 rounded-lg h-[80px]"
          >
            <div
              class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 mr-4 flex-shrink-0"
            >
              <span class="text-white text-sm">{{ child.id }}</span>
            </div>
            <div class="flex flex-col justify-center items-center w-full">
              <div class="text-xl font-bold text-gray-800 leading-none">
                {{ child.count }}
              </div>
              <div class="text-sm text-gray-600 mt-2">{{ child.name }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-span-2 border-r border-[#5693CB] pr-8 gradient-border">
        <div class="mb-4">
          <span class="text-lg font-bold">{{ crowdedPlacesData.name }}</span>
          <span v-if="crowdedPlacesData.count" class="ml-2 text-gray-600"
            >({{ crowdedPlacesData.count }})</span
          >
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div class="gap-4 flex-1 grid grid-rows-3">
            <div
              v-for="child in crowdedPlacesData.children.slice(0, 3)"
              :key="child.id"
              class="flex items-center p-4 bg-gray-50 rounded-lg h-[80px]"
            >
              <div
                class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 mr-4 flex-shrink-0"
              >
                <span class="text-white text-sm">{{ child.id }}</span>
              </div>
              <div class="flex flex-col justify-center items-center w-full">
                <div class="text-xl font-bold text-gray-800 leading-none">
                  {{ child.count }}
                </div>
                <div class="text-sm text-gray-600 mt-2">{{ child.name }}</div>
              </div>
            </div>
          </div>
          <div class="gap-4 flex-1 grid grid-rows-3">
            <div
              v-for="child in crowdedPlacesData.children.slice(3, 6)"
              :key="child.id"
              class="flex items-center p-4 bg-gray-50 rounded-lg h-[80px]"
            >
              <div
                class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 mr-4 flex-shrink-0"
              >
                <span class="text-white text-sm">{{ child.id }}</span>
              </div>
              <div class="flex flex-col justify-center items-center w-full">
                <div class="text-xl font-bold text-gray-800 leading-none">
                  {{ child.count }}
                </div>
                <div class="text-sm text-gray-600 mt-2">{{ child.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex flex-col">
        <div class="mb-4">
          <span class="text-lg font-bold">{{ trafficInfoData.name }}</span>
          <span v-if="trafficInfoData.count" class="ml-2 text-gray-600"
            >({{ trafficInfoData.count }})</span
          >
        </div>
        <div class="gap-4 flex-1 grid grid-rows-3">
          <div
            v-for="child in trafficInfoData.children"
            :key="child.id"
            class="flex items-center p-4 bg-gray-50 rounded-lg h-[80px]"
          >
            <div
              class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 mr-4 flex-shrink-0"
            >
              <span class="text-white text-sm">{{ child.id }}</span>
            </div>
            <div class="flex flex-col justify-center items-center w-full">
              <div class="text-xl font-bold text-gray-800 leading-none">
                {{ child.count }}
              </div>
              <div class="text-sm text-gray-600 mt-2">{{ child.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="relative bg-white border border-gray-300 rounded-md p-4 w-64">
  <p class="text-gray-800">这是带三角箭头的边框内容</p>

  <!-- 三角箭头 -->
  <div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 
              border-x-8 border-x-transparent 
              border-t-8 border-t-gray-300"></div>
</div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
const allStrore = useAllNewMapStore();
const { mainTreeData } = storeToRefs(allStrore);


// 固定数值的映射表
const fixedCounts: Record<string, number> = {
  "危化品生产企业": 2,
  "危化经营": 2,
  "特种设备密集企业": 2,
  "体育馆": 2,
  "电影院": 2,
  "医疗机构": 2,
  "学校": 2,
  "养老机构": 2,
  "农贸市场": 2,
  "高速公路收费站": 2,
  "地铁站": 2,
  "公交客运站": 2,
};

const getSearchTreeDataKeyValue = (key: string, value: string, data: any[]) => {
  let selectNode = undefined;
  for (let node of data) {
    if (node[key] === value) {
      selectNode = node;
      break;
    }
    if (node.children) {
      selectNode = getSearchTreeDataKeyValue(key, value, node.children);
      if (selectNode) {
        break;
      }
    }
  }
  return selectNode;
};

// 获取各类数据的计算属性
const getCountByTitle = (title: string) => {
  // 优先使用固定数值
  if (title in fixedCounts) {
    return fixedCounts[title];
  }
  // 如果没有固定数值，则从动态数据中获取
  const node = getSearchTreeDataKeyValue("title", title, mainTreeData.value);
  return node?.count || 0;
};

// 重点企业数据
const keyEnterpriseData = computed(() => {
  const children = [
    { name: "危化品生产企业", count: getCountByTitle("危化品生产企业"), id: 1 },
    { name: "危化经营", count: getCountByTitle("危化经营"), id: 2 },
    { name: "特种设备密集企业", count: getCountByTitle("特种设备密集企业"), id: 3 },
  ];
  return {
    id: 1,
    name: "重点企业",
    count: children.reduce((sum, child) => sum + child.count, 0),
    children,
  };
});

// 人员密集场所数据
const crowdedPlacesData = computed(() => {
  const children = [
    { name: "体育馆", count: getCountByTitle("体育馆"), id: 1 },
    { name: "电影院", count: getCountByTitle("电影院"), id: 2 },
    { name: "医疗机构", count: getCountByTitle("医疗机构"), id: 3 },
    { name: "学校", count: getCountByTitle("学校"), id: 4 },
    { name: "养老机构", count: getCountByTitle("养老机构"), id: 5 },
    { name: "农贸市场", count: getCountByTitle("农贸市场"), id: 6 },
  ];
  return {
    id: 2,
    name: "人员密集场所",
    count: children.reduce((sum, child) => sum + child.count, 0),
    children,
  };
});

// 重点交通信息数据
const trafficInfoData = computed(() => {
  const children = [
    { name: "高速公路收费站", count: getCountByTitle("高速公路收费站"), id: 1 },
    { name: "地铁站", count: getCountByTitle("地铁站"), id: 2 },
    { name: "公交客运站", count: getCountByTitle("公交客运站"), id: 3 },
  ];
  return {
    id: 3,
    name: "重点交通信息",
    count: children.reduce((sum, child) => sum + child.count, 0),
    children,
  };
});

// 最终的计算列表
const computedList = computed(() => [
  keyEnterpriseData.value,
  crowdedPlacesData.value,
  trafficInfoData.value,
]);
</script>

<style scoped>
.gradient-border {
  border: 1px solid;
  border-image: linear-gradient(180deg, rgba(86, 147, 203, 0) 0%, #5693CB 49%, rgba(86, 147, 203, 0) 100%) 1;
}
</style>
